Rive 事件

⚠️ 弃用通知： 本页面全部内容记录的是旧版事件系统。对于新项目： 请改用数据绑定。对于现有项目： 请尽快规划从事件迁移到数据绑定。此内容仅供旧版支持参考。

通过 Rive 事件，您可以订阅从动画、状态机和 Rive 监听器报告的有意义的信号，所有这些都是在设计时从 Rive 编辑器创建的。这些信号可以在运行时订阅，具有特定的名称、类型以及各种可能伴随事件的自定义元数据，以帮助告知其含义的上下文。

有关事件功能的更多一般信息，请查看文档编辑器部分的事件页面。事件系统也已扩展为支持音频事件，以在编辑器和运行时触发音频播放。

例如，在模拟加载器的 Rive 图形中，当从 complete 时间线动画状态过渡到 idle 状态时，可能会触发名为 LoadComplete 的事件。您可以通过运行时可能调用的回调来订阅 Rive 事件，然后您的回调可以在事件触发的恰当时刻处理额外功能。

事件的其他实际用例：

• 在动画的特定时刻协调音频播放，参见音频事件
• 当特定交互发生时打开 URL
• 在有意义的触摸交互上添加触觉反馈
• 在按钮和其他 UI 元素上实现功能
• 发送语义信息
• 在正确时刻传达运行时需要的任何信息

订阅事件

当您在运行时订阅 Rive 事件时，您订阅的是状态机可能发出的所有 Rive 事件，您可以通过名称或类型解析每个事件以执行条件逻辑。

让我们使用一个五星评分 Rive 示例来设置随事件提供的任何文本，并在给出 URL 时打开它。

新版运行时（推荐）

添加 Rive 事件监听器

⚠️ 此功能已弃用。我们建议使用数据绑定。

export default function EventsExample() {
    const { riveViewRef, setHybridRef } = useRive();
    const { riveFile } = useRiveFile(require('path/to/file.riv'));

    const handleRiveEvent = (event: any) => {
    console.log('Rive Event:', event);
    };

    // 当 ref 可用时添加事件监听器
    useEffect(() => {
    if (riveViewRef) {
        riveViewRef.onEventListener(handleRiveEvent);
    }
    return () => {
        if (riveViewRef) {
        riveViewRef.removeEventListeners();
        }
    };
    }, [riveViewRef]);

    return (
    <View style={styles.container}>
        <View style={styles.riveContainer}>
        {riveFile ? (
            <RiveView
            style={styles.rive}
            autoPlay={true}
            fit={Fit.Contain}
            file={riveFile}
            hybridRef={setHybridRef}
            />
        ) : null}
        </View>
    </View>
    );
}

旧版运行时

添加 Rive 事件监听器

与您可以在 <Rive> 组件上提供的其他回调函数（如 onPlay 或 onStateChange）类似，您现在可以提供 onRiveEventReceived 回调，每当渲染循环中报告 Rive 事件时，该回调将被调用。

API 签名如下：

onRiveEventReceived?: (event: RiveGeneralEvent | RiveOpenUrlEvent) => void;

示例用法：

import React, { useRef, useState } from 'react';
import {
SafeAreaView,
ScrollView,
Linking,
Text,
} from 'react-native';
import Rive, { Fit, RiveOpenUrlEvent, RiveRef } from 'rive-react-native';

export default function Events() {
const riveRef = useRef<RiveRef>(null);
const [eventMessage, setEventMessage] = useState('');

return (
    <SafeAreaView>
    <ScrollView>
        <Rive
        ref={riveRef}
        autoplay={true}
        fit={Fit.Cover}
        resourceName={'rating'}
        stateMachineName="State Machine 1"
        onRiveEventReceived={(event) => {
            // 这些是在 Rive 编辑器中设计时添加到事件的属性
            const eventProperties = event.properties;
            if (eventProperties?.message) {
            setEventMessage(eventProperties.message as string);
            }

            // 如果事件附带 URL，打开它
            if ('url' in event) {
            Linking.openURL((event as RiveOpenUrlEvent).url || '');
            }
        }}
        />
        <Text>{eventMessage}</Text>
    </ScrollView>
    </SafeAreaView>
);
}